import { observer } from 'mobx-react';
import React from 'react';
import * as ReactDOM from 'react-dom';
import "./LeftBar.css";

//flex 演练场 https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
//BUG 导致了这个竖直工具条无法正常工作  https://github.com/philipwalton/flexbugs#flexbug-14

let arr: number[] = [];
for (let i = 0; i < 30; i++)
    arr.push(i);

const App = observer(() =>
{
    return (
        <main>
            <div id="left">
                {arr.map(i => <div key={i} className="box">123</div>)}
            </div>
            <div id="right">
            </div>
        </main >
    );
});

let app = document.getElementById("app");

//@ts-ignore
let ro = new ResizeObserver(() =>
{
    let el = document.getElementById("left");
    let last = el.lastChild as HTMLElement;
    let box = last.getBoundingClientRect();
    console.log('box: ', box);
    el.style.width = box.right + "px";
});
ro.observe(app);

export function RenderLeftBar()
{
    ReactDOM.render(<App />, app);
}
